@use 'sass:math';

.login-container::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 1;
}

.login-container {
  height: 100vh;
  background: linear-gradient(180deg, var(--el-color-primary), #0b3d91);
  position: relative;
  overflow: hidden;

  .particles-bg {
    position: absolute;
    width: 100%;
    height: 100%;

    .particle {
      position: absolute;
      border-radius: 50%;
      &:nth-child(odd) {
        background: rgba(255, 255, 255, 0.05);
      }
      &:nth-child(even) {
        background: rgba(173, 216, 230, 0.08);
      }
      animation: float 40s infinite linear;

      @for $i from 1 through 60 {
        &:nth-child(#{$i}) {
          $size: math.random(20) + 10px;
          width: $size;
          height: $size;
          left: math.random(100) * 1%;
          top: math.random(100) * 1%;
          animation-delay: math.random(20) * -1s;
          animation-duration: math.random(20) + 10s;
        }
      }
    }
  }

  .animated-bg {
    flex: 1;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        rgba(67, 97, 238, 0.1) 25%,
        transparent 25%,
        transparent 50%,
        rgba(67, 97, 238, 0.1) 50%,
        rgba(67, 97, 238, 0.1) 75%,
        transparent 75%,
        transparent
      );
      background-size: 60px 60px;
      animation: animate 20s linear infinite;
    }
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle, rgba(103, 58, 183, 0.1) 0%, transparent 70%);
      animation: pulse 4s ease-in-out infinite;
    }
  }

  .login-form {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 380px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(92, 184, 255, 0.2);
    backdrop-filter: blur(12px);
    z-index: 2;

    .form-title {
      color: #2c3e50;
      text-align: center;
      margin-bottom: 30px;
    }

    .login-btn {
      width: 100%;
    }

    .form-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
    }
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.7;
  }
  25% {
    transform: translate(12vw, -8vh) scale(0.9);
  }
  50% {
    transform: translate(-7vw, 12vh) scale(1.1);
    opacity: 0.9;
  }
  75% {
    transform: translate(10vw, 6vh) scale(0.95);
  }
}

@keyframes animate {
  0% {
    transform: translate(-25%, -25%) rotate(0deg);
  }
  100% {
    transform: translate(-25%, -25%) rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.05);
  }
}
